﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery.tmpl.js"></script>
    <script src="./js/json2.js" type="text/javascript"></script>
    <script src="./js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
    <link href="./js/css/ui-lightness/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
    <script src="./js/uniform/jquery.uniform.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="./js/uniform/css/uniform.default.css" type="text/css" media="screen" />
     <style type="text/css" media="screen">
      body {
        padding: 5px;
      }
      h1 {
        margin-top: 0;
      }
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      select { width:185px;}
      li {
        margin-bottom: 5px;
        clear: both;
      }
      label {
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        display: block;
        margin-bottom: 3px;
        clear: both;
      }
      input { width:185px}
    </style>
</head>
<body>
    <div class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="font-size: 0.9em;height:80%">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="" style="text-align: center; vertical-align: middle;">Column Configuration</li>
        </ul>
        <div style="padding: 0.5em; font-size: 0.8em" id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
            <div id="columnContainer">
            </div>
            <br />
            <button class='btntool' onclick="SaveChanges();return false;">
                Save</button>&nbsp;
            <button class='btntool' onclick="window.close();return false;">
                Cancel</button>
        </div>
    </div>
    <div id='templates'>
    <script id="colText" type="text/x-jQuery-tmpl">
        <div class='colText'>
            
        </div>
    </script>
    <script id="colMultiple" type="text/x-jQuery-tmpl">
        <option value='${$data.key}' {{if ($data.value == "1")}}selected='selected'{{else}}{{/if}}>${$data.key}</option>
    </script>
    <script id="colTextSource" type="text/x-jQuery-tmpl">
            <label id="lblTextSources" for="fldTextSources">Text Sources: </label>
            <select name="fldTextSources" multiple="multiple">
                {{if TextSources}}
                    {{tmpl(TextSources) "#colMultiple"}}
                {{else}}
                {{/if}}
            </select><br />
    </script>
    <script id="colLink" type="text/x-jQuery-tmpl">
            <label id="lblLinkSources" for="fldLinkSources">Link Sources: </label>
            <select name="fldLinkSources" id="fldLinkSources" multiple="multiple">
                {{if LinkSources}}  
                    {{each LinkSources}}
                       <option value='${key}'  {{if (value == 'true')}}selected='selected'{{else}}{{/if}}>${key}</option> 
                     {{/each}}
                {{else}}
                {{/if}}
            </select><br /><br />

            <label id="lblHeader" for="fldLinkPattern">Link Pattern: </label>
            <input id="fldLinkPattern" name="fldLinkPattern" type="text" value='${LinkPattern}' />
    </script>
    <script id="columnMaster" type="text/x-jQuery-tmpl">
        <div>
           <h3><a href="#">${Header}</a></h3>
           <div class='colWrap' id='col-${Name}'>
                <label for="fldName">Field Name:</label><span id="fldName">${Name}</span><br /><br />
                <span style='display:none' id='fieldIndex'>${index}</span>
                <label id="lblHeader" for="fldHeader">Header: </label><input name="fldHeader" id="fldHeader" type="text" value='${Header}' /><br /><br />

                <label id='lblHidden' for='fldHidden'>Hidden: </label>
                <input name="fldHidden${Name}" type="radio" {{if (Hidden == "true")}}checked="checked"{{else}}{{/if}} value="true" />Yes <input name="fldHidden${Name}" {{if (Hidden == "false")}}checked="checked"{{else}}{{/if}} type="radio" value="false" />No<br /><br />

                <label id="lblType" for="fldType">Column Type: </label>
                <select name="fldType" class='fldDropType'>
				    <option {{if (ColType == 'Text')}}selected='selected'{{else}}{{/if}}>Text</option>
				    <option {{if (ColType == 'Link')}}selected='selected'{{else}}{{/if}}>Link</option>
			    </select><br /><br />

                <label id="lblTextPattern" for="fldTextPattern">Text Pattern: </label>
                <input id='fldTextPattern' name="fldTextPattern" type="text" value='${TextPattern}' /><br /><br />
                
                <div class='colText' style='display:{{if (ColType == 'Text')}}block{{else}}none{{/if}}'>
                    {{tmpl "#colText"}}
                </div>
                <div class='colLink' style='display:{{if (ColType == 'Link')}}block{{else}}none{{/if}}'>
                    {{tmpl "#colLink"}}
                </div>
           </div>
        </div>
    </script>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var remote = window.opener.document.getElementById('psColumnMap');

            myJSONtext = remote.value;

            columns = eval('(' + myJSONtext + ')');
            for (var i = 0; i < columns.length; i++)
                columns[i].index = i;
            //-----------------------
            $("#columnMaster").tmpl(columns).appendTo("#columnContainer");

            $("input, textarea, select").uniform();

            $(".fldDropType").change(function (e) {
                var drp = $(this).parent();
                drp.siblings('.colText').toggle();
                drp.siblings('.colLink').toggle();
                $("#columnContainer").accordion('resize');
            });

            var stop = false;
            $("#columnContainer h3").click(function (event) {
                if (stop) {
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    stop = false;
                }
            });
            $("#columnContainer")
			    .accordion({
			        header: "> div > h3", autoHeight: false
			    })
			    .sortable({
			        axis: "y",
			        handle: "h3",
			        stop: function () {
			            stop = true; $("#columnContainer").accordion('resize');
			        }
			    });

            $(".btntool").button();
        });

        function SaveChanges() {

            var infos = $(".colWrap").each(function (index) {
                $this = $(this);
                var col = columns[parseInt($('#fieldIndex', $this).html())];
                col.Header = $("#fldHeader", $this).val();
                col.Hidden = $(':checked', $this).first().val();
                col.ColType = $('.fldDropType', this).val();
                col.TextPattern = $('#fldTextPattern', $this).val();
                col.LinkPattern = $('#fldLinkPattern', $this).val();
                col.Order = index;
                var sources = $('#fldLinkSources', this);
                $('option', sources).each(function (i) {
                    var sel = $(this).attr('selected');
                    col.LinkSources[i].value = sel;
                });
            });

            var remote = window.opener.document.getElementById('psColumnMap');
            remote.value = JSON.stringify(columns);
            window.close();
        }
    </script>
</body>
</html>
